<!--待处理服务页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size: 20px;">待处理服务</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddService">新增服务</el-button>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               >导出</el-button>
  </div>
  <!-- 新增弹窗 -->
  <!-- :before-close="handleClose"表示在弹窗关闭前调用自定义的处理弹窗关闭的函数 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-message>居民信息</el-message>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="居民">
            <el-input placeholder="请输入" v-model="updateResidentForm.username"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input placeholder="请输入手机号" v-model="updateResidentForm.idNumber"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="updateResidentForm.gender">
              <el-radio border label="男" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="出生年月">
            <el-date-picker type="date"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="updateResidentForm.birth" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input placeholder="请输入" v-model="updateResidentForm.phone"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地">
            <el-input placeholder="请输入" v-model="updateResidentForm.presentAddress"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="居民标签">
            <el-select placeholder="请选择" v-model="updateResidentForm.residentTegStatus">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭成员">
            <el-select placeholder="请选择" v-model="updateResidentForm.familyMembers">
              <el-option v-for="item in leaderOptions"
                         :label="item.username" :value="item.id"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="服务编号">
            <el-input placeholder="请输入" v-model="saveServiceForm.id"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务机构">
            <el-select placeholder="请选择" v-model="saveServiceForm.organ">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务团队">
            <el-select placeholder="请选择" v-model="saveServiceForm.team" >
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="服务医生">
            <el-select placeholder="请选择" v-model="saveServiceForm.doctor">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务包">
            <el-select placeholder="请选择" v-model="saveServiceForm.service">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务项目">
            <el-select placeholder="请选择" v-model="saveServiceForm.project">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="服务地点">
            <el-select placeholder="请选择" v-model="saveServiceForm.add">
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务时间">
            <el-date-picker type="date"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveServiceForm.time" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-form-item label="服务备注">
          <el-input placeholder="请输入" v-model="saveServiceForm.note"/>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">返回</el-button>
      <el-button type="primary">保存</el-button>
    </template>
  </el-dialog>

  <!-- 用户搜索卡片 -->
  <el-card style="margin: 40px; height: auto;">
      <el-form :inline="true" :model="searchServiceForm">
    <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="服务状态">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchServiceForm.status">
              <el-option label="待审核" value="1"></el-option>
              <el-option label="待服务" value="2"></el-option>
              <el-option label="已驳回" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约机构">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchServiceForm.organ">
              <el-option label="zzz" value="1"></el-option>
              <el-option label="ccc" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医生团队">
            <el-select placeholder="请选择" style="width: 220px;" v-model="searchServiceForm.team">
              <el-option label="zzz" value="1"></el-option>
              <el-option label="ccc" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :span="6">
        <el-form-item label="服务包">
          <el-select placeholder="请选择" style="width: 220px;" v-model="searchServiceForm.service">
            <el-option label="zzz" value="1"></el-option>
            <el-option label="ccc" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预约日期">
          <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="searchServiceForm.time" />
        </el-form-item>
      </el-col>
      <el-col :span="6" :offset="6">
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  </el-card>

  <!-- 用户列表表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="姓名" prop="username" align="center"></el-table-column>
      <el-table-column label="身份证号" prop="phone" align="center"></el-table-column>
      <el-table-column label="手机号" prop="createTime" align="center"></el-table-column>
      <el-table-column label="服务状态" align="center"></el-table-column>
      <el-table-column label="服务包" prop="createTime" align="center"></el-table-column>
      <el-table-column label="服务项目" prop="createTime" align="center"></el-table-column>
      <el-table-column label="申请时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40">查看详情</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref("新建用户");

//定义数组用来维护员工职级的选项
const levelOptions = ref([
  {label: "慢病护理", value: '10'},
  {label: "高血压", value: '20'},
  {label: "高血糖", value: '30'},
  {label: "高血脂", value: '40'}
])
//定义数组用来维护家属数据
const leaderOptions = ref([
  {username: "XX", id: 201},
  {username: "YY", id: 202}
]);


//定义对象用来保存表单中的居民数据
const updateResidentForm = ref({
  username: "",
  idNumber:"",
  gender:"",
  birth: "",
  phone: "",
  presentAddress: "",
  residentTegStatus:"",
  familyMembers: ""
});

//定义对象保存表单中服务信息
const saveServiceForm = ref({
  id:"",
  organ:"",
  team:"",
  doctor:"",
  service:"",
  project:"",
  add:"",
  time:"",
  note:""
})

//定义重置搜索条件的方法
const resetSearch = ()=>{
  searchServiceForm.value = {};
}

/*点击新建用户按钮,出弹窗,修改弹窗标题*/
const beforeAddService = () => {
  //修改弹窗标题
  dialogTitle.value = "新建服务";
  //显示弹窗
  dialogVisible.value = true;
}

//定义处理弹窗关闭的方法
const handleClose = () => {
  if(confirm('您确认要关闭弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //并且清空表单数据
    updateResidentForm.value = {};
  }
}

//定义对象用来保存用户搜索条件
const searchServiceForm = ref({status: "", organ: "",team:"",service:"",time:""});
//定义数组对象用来保存请求回来的用户数据
const userArr = ref([]);


</script>

<style scoped>

</style>